<template>
	<view>
		<view class="section">
			<view class="section-1 flex-align">
				<view class="image">
					<view
						style="width: 100%;height: 250rpx;background-color: #EDF5F5;display: flex;lex-direction: row; justify-content: center; align-items: center;">
						<image style="width: 100%;height: 250rpx;" :src="datalist.cover" mode="aspectFit"></image>
					</view>
				</view>

				<view class="detail">
					<view>
						<view class="title elipsis-1">{{ datalist.name }}</view>
						<view class="" style="display: flex; flex-direction: row; align-items: center;">
							<view class="tag flex-align">
								{{ datalist.course_name }}
							</view>
							<view class="tag flex-align">
								{{ datalist.program_name }}
							</view>

							<!-- <image style="width: 25rpx;height: 25rpx;"
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f1c02d6507d5b869a8fa25b144993dc02a42e038.png"
								mode=""></image>
							<view style="color: #FE8C61;font-size: 24rpx;margin-left: 6rpx;">
								招生中
							</view> -->
						</view>

						<view class="flex-between">
							<view
								style="font-size: 24rpx;color: #4E6EAF;margin-top: 20rpx;display: flex; flex-direction: row; ">
								<view class="tags flex-align">
									{{ datalist.train_enum_name }}
								</view>
								<view class="">
									{{datalist.area_name}}
								</view>

							</view>
							<view class="" style="font-size: 24rpx;color: #ff0000;" v-if="hour_num">
								{{hour_num}}次
							</view>
						</view>
						<view class="flex-between">
							<view style="font-size: 24rpx;color: #4E6EAF;margin-top: 20rpx;">
								剩余：{{ datalist.less_stock }}
							</view>
							<view class="" style="font-size: 24rpx;color: #ff0000;">
								剩余：{{less_stock?less_stock:0}}
							</view>
						</view>
						<view class="flex-between">
							<view style="font-size: 24rpx;color: #4E6EAF;margin-top: 20rpx;">
								{{datalist.display_time}}
							</view>
							<view class="" style="font-size: 24rpx;color: #ff0000;">
								¥{{price_selling}}
							</view>
						</view>
					</view>
					<!-- <view class="flex-align">
						<view class="price">{{item.area_name}}</view>
					</view> -->
				</view>
			</view>

			<view style="margin-top: 20rpx;">
				<view class="section-2" v-for="(im, ix) in skuList" :key="ix">
					<view class="sub-title">{{ im.name }}</view>
					<view class="tag-list">
						<view v-for="(item2, index2) in im.list" :key="index2" @click="clickSpec(im, item2)"
							style="display: flex;flex-direction: column; ;align-items: center;  justify-content: center; flex-wrap: wrap;padding-left: 20rpx;font-size: 26rpx;">
							<view v-if="item2.coach_avatar"
								:class="[hasSelected(item2)? 'menu-image':'active-menu-image']">
								<image style="border-radius: 50% 50%;" :src="item2.coach_avatar" mode="scaleToFill" />
							</view>
							<view class="spec-value" :class="[hasSelected(item2)? 'active-spec-value':'spec-value']">
								{{ item2.sku_name }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="" style="width: 100%;height: 140rpx;"></view>
			<view class="footer flex-align" style="flex-direction: column;">
				<view class="">
					{{enroll_start_time}}-{{enroll_end_time}}
				</view>
				<view class="flex-align" style="width: 100%;">
					<view class="btn" @click="handSubmit" v-if="canEnroll">
						<!-- 仅当有有效时间范围且结束时间存在时才显示倒计时 -->
						<view class="" v-if="can_Enroll == true">
							<view class="" v-if="hasValidTimeRange && enroll_end_time">
								<view v-if="hasValidTimeRange && enroll_end_time">
									{{countdownt}}:{{countdownh}}:{{countdownm}}:{{countdowns}}
								</view>
								<view>
									{{enrollmentStatus }}
								</view>
							</view>
							<view class="" v-else style="padding: 12rpx 0;">
								<view>
									{{enrollmentStatus }}
								</view>
							</view>
						</view>
						<view class="" v-if="can_Enroll == false" style="padding: 12rpx 0;">
							<view v-if="hasValidTimeRange && enroll_end_time">
								{{countdownt}}:{{countdownh}}:{{countdownm}}:{{countdowns}}
							</view>
							<view>
								{{enrollmentStatus }}
							</view>
						</view>
					</view>
					<view style="width: 100%;" v-if="!canEnroll">
						<view class="admbtn1"
							v-if="enrollmentStatus === '报名时间未到' && hasValidTimeRange && enroll_start_time">
							<view>
								{{countdownt}}:{{countdownh}}:{{countdownm}}:{{countdowns}}
							</view>
							{{enrollmentStatus}}
						</view>
						<view class="admbtn" v-else>
							{{enrollmentStatus}}
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="footer1 flex-align"  v-if="canEnroll == true">
				<view class="btn">{{countdownt}}:{{countdownh}}:{{countdownm}}:{{countdowns}}</view>

			</view> -->
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	import conAlert from "@/components/com-alert/com-alert.vue";
	export default {
		components: {
			conAlert,
		},
		data() {
			return {
				datalist: {},
				coachList: [],
				courseItemList: [],
				course_item_id: '',
				coach_id: '',
				showoccupation: false,
				occupation_status: [],
				price_selling: '',
				hour_num: '',
				venue_id: '',
				courselist: {},
				venue_name: '',
				less_stock: 0,
				coach_name: '',
				course_item_name: '',
				skuOplist: [],
				skuList: [],
				checkedSpec: [],
				checkedSpecStr: "",
				selectedId1: null, // 存储课包选择的id
				selectedId2: null, // 存储教练选择的id
				defaultCombinedValue: "", // 用于存储默认拼接值
				skuList: [],
				selectedId1: null, // 存储课包选择的id
				combinedValue: "", // 用于存储拼接值
				itemList: [],
				enroll_start_time: '',
				enroll_end_time: '',
				enrollmentStatus: '',
				countdownh: '',
				countdownm: '',
				countdowns: '',
				timer: null, //重复执行
				str_time: '',
				expire_time: '',
				t_time: '',
				t_times: '',
				countdownt: '',
				enrollmentStatus: '',
				canEnroll: false,
				hasValidTimeRange: false,
				can_Enroll: false
			};
		},

		onLoad(options) {
			const selectionArrs = JSON.parse(decodeURIComponent(options.selectionArr))
			this.datalist = selectionArrs
			this.venue_id = options.venue_id;
			this.venue_name = options.venue_name;
			// this.trainitems()
			this.sku_options()
			this.timer = setInterval(() => {
				this.showtime()
			})
			setTimeout(() => {
				if (this.countdownh != '' || this.countdownm != '' || this.countdowns != '') {
					// this.paymoney()
				}
			}, 200)
		},

		methods: {
			// 时间倒计时
			showtime() {
				var nowtime = new Date(), //获取当前时间
					starttime = new Date(this.t_times); //定义结束时间
				// endtime = new Date(this.t_time); //定义结束时间
				var lefttime = starttime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					// lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
					// 	(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
					// 	24), //加天数
					lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24)) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24)) : Math.floor((lefttime / (1000 * 60 * 60) % 24)), //不加天数
					//计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
				this.countdownt = leftd //天数
				this.countdownh = lefth //返回倒计时的字符串
				this.countdownm = leftm //返回倒计时的字符串
				this.countdowns = lefts //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					// uni.navigateTo({
					// 	url: '/pages/personal/orders/orders?tab=2',
					// });
					return this.countdownh = this.countdownh = this.countdownm = this.countdowns = "00"

				}
			},
			hasSelected(item) {
				return item.selected === true;
			},
			clickSpec(im, item2) {
				// 先清除同组其他项的selected属性
				this.skuList.find(obj => obj.id === im.id && obj.list.includes(item2)).list.forEach(i => delete i
					.selected);
				item2.selected = true;
				if (im.id === 1) {
					// 假设第一个id为1的是课包选择，第二个是教练选择（如果存在）
					const packageIndex = this.skuList.findIndex(obj => obj.id === 1 && this.skuList.indexOf(obj) === 0);
					const coachIndex = this.skuList.findIndex(obj => obj.id === 1 && this.skuList.indexOf(obj) === 1);
					if (packageIndex !== -1 && im === this.skuList[packageIndex]) {
						this.selectedId1 = item2.id;
					} else if (coachIndex !== -1 && im === this.skuList[coachIndex]) {
						this.selectedId2 = item2.id;
					}
				}
				this.updateCombinedValue();
			},
			updateCombinedValue() {
				let parts = [];
				// 确保课包id有值时添加到拼接数组
				if (this.selectedId1) {
					parts.push(this.selectedId1.toString());
				}
				let otherParts = [];
				// 确保教练id有值时添加到拼接数组
				if (this.selectedId2) {
					parts.push(this.selectedId2.toString());
				}
				this.skuList.forEach((obj) => {
					if (obj.id === 0) {
						const selectedItem = obj.list.find(i => i.selected);
						if (selectedItem) {
							otherParts.push(selectedItem.sku_name);
						} else if (obj.list.length > 0) {
							otherParts.push(obj.list[0].sku_name);
						}
					}
				});
				const combinedOtherParts = otherParts.join('');
				if (combinedOtherParts) {
					parts.push(combinedOtherParts);
				}
				this.combinedValue = parts.join('-');
				console.log(this.combinedValue, '点击后的拼接值');
				if (this.itemList.length > 0) {
					const courselist = this.itemList.find((obj) => obj.key == this.combinedValue);
					console.log(courselist, 'courselist222');
					this.courselist = courselist
					this.price_selling = courselist.price_selling
					this.hour_num = courselist.hour_num
					this.less_stock = courselist.less_stock
					this.coach_id = courselist.coach_id
					this.course_item_id = courselist.course_item_id
					if (courselist.coach_name) {
						this.coach_name = courselist.coach_name
					}
					if (courselist.course_item_name) {
						this.course_item_name = courselist.course_item_name
					}

					this.enroll_start_time = courselist.enroll_start_time;
					this.enroll_end_time = courselist.enroll_end_time;
					console.log(startTime, '333')
					console.log(endTime, '444')
					const now = new Date();
					let startTime;
					let endTime;

					// 直接根据原始字符串判断开始时间是否有效
					if (this.enroll_start_time && this.enroll_start_time.trim() !== "") {
						startTime = new Date(this.enroll_start_time);
						if (isNaN(startTime.getTime())) {
							startTime = undefined;
						}
					}

					// 直接根据原始字符串判断结束时间是否有效
					if (this.enroll_end_time && this.enroll_end_time.trim() !== "") {
						const tempEndTime = `${this.enroll_end_time} 23:59:59`;
						endTime = new Date(tempEndTime);
						if (isNaN(endTime.getTime())) {
							endTime = undefined;
						}
					}

					console.log(this.enroll_start_time, '1111');
					console.log(this.enroll_end_time, '2222');

					this.hasValidTimeRange = Boolean(startTime || endTime);

					if (this.hasValidTimeRange) {
						if (startTime && now < startTime) {
							this.enrollmentStatus = '报名时间未到';
							this.canEnroll = false;
							console.log('调用 gettime，原因：报名时间未到');
							this.gettime();
						} else if (endTime && now > endTime) {
							this.enrollmentStatus = '报名时间已过期';
							this.canEnroll = false;
						} else {
							if (this.less_stock > 0) {
								this.enrollmentStatus = '可以报名';
								this.canEnroll = true;
								this.can_Enroll = true
								console.log('pppp11111');
								if (endTime) {
									console.log('调用 gettime，原因：可以报名且有结束时间');
									this.gettime();
								}
							} else {
								this.enrollmentStatus = '库存不足，无法报名';
								this.canEnroll = false;
							}
						}
					} else {
						// 如果开始时间和结束时间都无效，则只考虑库存
						if (this.less_stock > 0) {
							console.log('调用 gettime，原因：时间无效且库存充足');
							this.enrollmentStatus = '可以报名';
							this.canEnroll = true;
							this.can_Enroll = false
						} else {
							this.enrollmentStatus = '库存不足，无法报名';
							this.canEnroll = false;
						}
					}
				}
			},

			async sku_options() {
				let that = this;
				let params = {
					train_id: this.datalist.id,
				};
				let res = await venues.sku_list(params);
				if (res.code === 1) {
					this.skuList = res.data.skuList;
					this.itemList = res.data.itemList;
					// 初始化默认选中第一个
					this.skuList.forEach((obj) => {
						if (obj.list.length > 0) {
							obj.list[0].selected = true;
							const packageIndex = this.skuList.findIndex(obj => obj.id === 1 && this.skuList
								.indexOf(obj) === 0);
							const coachIndex = this.skuList.findIndex(obj => obj.id === 1 && this.skuList
								.indexOf(obj) === 1);
							if (packageIndex !== -1 && obj === this.skuList[packageIndex]) {
								this.selectedId1 = obj.list[0].id;
							} else if (coachIndex !== -1 && obj === this.skuList[coachIndex]) {
								this.selectedId2 = obj.list[0].id;
							}
						}
					});
					const firstItems = this.getGroupFirstItems();
					this.defaultCombinedValue = firstItems.join('-');
					// 确保数据加载完成后再进行查找
					if (this.itemList.length > 0) {
						const courselist = this.itemList.find((obj) => obj.key == this.defaultCombinedValue);
						console.log(courselist, 'courselist111');
						this.courselist = courselist
						this.price_selling = courselist.price_selling
						this.hour_num = courselist.hour_num
						this.less_stock = courselist.less_stock
						this.coach_id = courselist.coach_id
						this.course_item_id = courselist.course_item_id
						if (courselist.coach_name) {
							this.coach_name = courselist.coach_name
						}
						if (courselist.course_item_name) {
							this.course_item_name = courselist.course_item_name
						}

						this.enroll_start_time = courselist.enroll_start_time;
						this.enroll_end_time = courselist.enroll_end_time;

						const now = new Date();
						let startTime;
						let endTime;

						// 直接根据原始字符串判断开始时间是否有效
						if (this.enroll_start_time && this.enroll_start_time.trim() !== "") {
							startTime = new Date(this.enroll_start_time);
							if (isNaN(startTime.getTime())) {
								startTime = undefined;
							}
						}

						// 直接根据原始字符串判断结束时间是否有效
						if (this.enroll_end_time && this.enroll_end_time.trim() !== "") {
							const tempEndTime = `${this.enroll_end_time} 23:59:59`;
							endTime = new Date(tempEndTime);
							if (isNaN(endTime.getTime())) {
								endTime = undefined;
							}
						}

						console.log(this.enroll_start_time, '1111');
						console.log(this.enroll_end_time, '2222');

						this.hasValidTimeRange = Boolean(startTime || endTime);

						if (this.hasValidTimeRange) {
							if (startTime && now < startTime) {
								this.enrollmentStatus = '报名时间未到';
								this.canEnroll = false;
								console.log('调用 gettime，原因：报名时间未到');
								this.gettime();
							} else if (endTime && now > endTime) {
								this.enrollmentStatus = '报名时间已过期';
								this.canEnroll = false;
							} else {
								if (this.less_stock > 0) {
									this.enrollmentStatus = '可以报名';
									this.canEnroll = true;
									this.can_Enroll = true
									console.log('pppp22222');
									if (endTime) {
										console.log('调用 gettime，原因：可以报名且有结束时间');
										this.gettime();
									}
								} else {
									this.enrollmentStatus = '库存不足，无法报名';
									this.canEnroll = false;
								}
							}
						} else {
							// 如果开始时间和结束时间都无效，则只考虑库存
							if (this.less_stock > 0) {
								console.log('调用 gettime，原因：时间无效且库存充足');
								this.enrollmentStatus = '可以报名';
								this.canEnroll = true;
								this.can_Enroll = false
							} else {
								this.enrollmentStatus = '库存不足，无法报名';
								this.canEnroll = false;
							}
						}
					}
				}
			},

			gettime() {
				console.log(13132, 'this.expire_time')
				// 获取当前时间
				const now = new Date();
				// 获取年、月、日、小时、分钟、秒
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hour = String(now.getHours()).padStart(2, '0');
				const minute = String(now.getMinutes()).padStart(2, '0');
				const second = String(now.getSeconds()).padStart(2, '0');
				// 拼接成指定格式的字符串
				this.create_at = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
				// 结束时间
				// this.expire_time = '2025-10-30 12:00:00'
				// this.expire_time = this.enroll_end_time
				if (this.enrollmentStatus == '可以报名') {
					this.expire_time = `${this.enroll_end_time} 23:59:59`;
				} else if (this.enrollmentStatus == '报名时间未到') {
					this.expire_time = `${this.enroll_start_time} 00:00:00`;
				}
				console.log(this.expire_time, 'this.expire_time')
				// 当前时间与结束时间相减
				var fullTime = this.create_at; // 日期字符串
				var timeArr = fullTime.replace(" ", ":").replace(/\:/g, "-").split("-");
				var nian = timeArr[0];
				var yue = timeArr[1];
				var ri = timeArr[2];
				var shi = timeArr[3];
				var fen = timeArr[4];
				var miao = timeArr[5];
				var str = nian + '/' + yue + '/' + ri + ' ' + shi + ':' + fen + ':' + miao;
				var t = new Date(str); //你已知的时间
				this.t_time = t
				var t_s = t.getTime(); //转化为时间戳毫秒数
				t.setTime(t_s + 1000 * 60 * 15); //设置新时间比旧时间多一分钟
				this.str_time = t
				var fullTimes = this.expire_time; // 日期字符串
				var timeArrs = fullTimes.replace(" ", ":").replace(/\:/g, "-").split("-");
				var nians = timeArrs[0];
				var yues = timeArrs[1];
				var ris = timeArrs[2];
				var shis = timeArrs[3];
				var fens = timeArrs[4];
				var miaos = timeArrs[5];
				var strs = nians + '/' + yues + '/' + ris + ' ' + shis + ':' + fens + ':' + miaos;
				var ts = new Date(strs); //你已知的时间
				this.t_times = ts
			},
			getGroupFirstItems() {
				let groupFirstItems = [];
				const packageItem = this.skuList.find(obj => obj.id === 1 && this.skuList.indexOf(obj) === 0);
				const coachItem = this.skuList.find(obj => obj.id === 1 && this.skuList.indexOf(obj) === 1);
				// 添加课包id
				if (packageItem && packageItem.list.length > 0) {
					groupFirstItems.push(packageItem.list[0].id.toString());
				}
				let otherFirstItems = [];
				// 添加教练id
				if (coachItem && coachItem.list.length > 0) {
					groupFirstItems.push(coachItem.list[0].id.toString());
				}
				this.skuList.forEach((obj) => {
					if (obj.id === 0 && obj.list.length > 0) {
						otherFirstItems.push(obj.list[0].sku_name);
					}
				});
				const combinedOtherFirstItems = otherFirstItems.join('');
				if (combinedOtherFirstItems) {
					groupFirstItems.push(combinedOtherFirstItems);
				}
				return groupFirstItems;
			},
			handSubmit() {
				console.log(this.courselist, 'this.courselist')
				uni.navigateTo({
					url: `./train_student?selectionArr=${encodeURIComponent(JSON.stringify(this.datalist))}` +
						"&venue_id=" + this.venue_id + "&courselist=" + encodeURIComponent(JSON.stringify(this
							.courselist)) +
						"&coach_id=" + this.coach_id + "&trainidname1=" + this.course_item_name +
						"&trainidname2=" +
						this.coach_name + "&venue_name=" + this.venue_name + "&course_item_id=" + this
						.course_item_id
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.section-2 {
		margin-bottom: 10px;
	}

	.sub-title {
		font-weight: bold;
		margin-bottom: 5px;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
	}

	.spec-value {
		margin-top: 5px;
		border: 2rpx solid #ccc;
		padding: 7rpx 15rpx;
	}

	.active-spec-value {
		border: 2rpx solid #409eff;
		padding: 7rpx 15rpx;
		color: #409eff;
	}

	.menu-image {
		// border: 2px solid #409eff;
		padding: 2rpx;
	}

	.active-menu-image {
		// border: 2px solid #ccc;
		padding: 2rpx;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
	}

	// .spec-value {
	// 	padding: 5rpx 10rpx;
	// 	margin: 2rpx;
	// 	border: #f0f0f0 1rpx solid;
	// 	font-size: 24rpx;
	// }

	// .spec-value1 {
	// 	padding: 5rpx 10rpx;
	// 	margin: 2rpx;
	// 	border: #ffffff 1rpx solid;
	// 	font-size: 24rpx;
	// }

	.text_color {
		padding: 5rpx 10rpx;
		margin: 2rpx;
		color: #2672eb;
		border: 1rpx solid #2672eb;
		font-size: 24rpx;
	}

	.text_color1 {
		padding: 5rpx 10rpx;
		margin: 2rpx;
		color: #2672eb;
		border: 1rpx solid #ffffff;
		font-size: 24rpx;
	}

	.btns {
		cursor: pointer;
		padding: 10rpx;
		margin-top: 20rpx;
		text-align: center;
		background-color: #3498db;
		color: #fff;
	}

	.active-menu-image {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.menu-image {
		width: 100rpx;
		height: 100rpx;
		background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/60cb40ff572199778113a809978ef6aa0f09db36.png') 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.menu-image-no-checked {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}


	.section {
		padding: 24rpx;

		.select-list {
			.item {
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				height: 50rpx;
				border-bottom: 1px solid #cccccc;
				padding: 0;

				&:last-of-type {
					border: none;
					margin: 0;
					padding: 0;
				}

				.image {
					width: 150rpx;
					height: 100%;

					/deep/ .vue-ref {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					display: flex;
					height: 100%;
					flex: 1;
					width: 0;
					margin-left: 20rpx;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: 700;
						font-size: 28rpx;
						margin-bottom: 15rpx;
					}

					.timer {
						color: #cacaca;
						font-size: 20rpx;
					}

					.bottom {
						font-size: 20rpx;
						color: #101010;

						.address {
							width: 70%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		.btns {
			background: linear-gradient(0deg, #528EFF, #2F75FA);
			border-radius: 20px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			// padding: 26rpx 0;
			// margin: 0px 30rpx;
			// margin-top: 120rpx;
			text-align: center;
			// position: fixed;
			// bottom: 24px;
			// right: 5%;
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btns_m {
			background: linear-gradient(0deg, #528EFF, #2F75FA);
			border-radius: 5px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			padding: 26rpx 0;
			width: 160rpx;
			height: 60rpx;
			text-align: center;
			line-height: 12rpx;

		}

		.btns_ms {
			// position: absolute;
			// right: 10rpx;
			// top: 110rpx;
		}

		.btns_s {
			background: linear-gradient(0deg, #bebebe, #bebebe);
			border-radius: 20px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			// padding: 26rpx 0;
			// margin: 0px 30rpx;
			// margin-top: 120rpx;
			text-align: center;
			// position: fixed;
			// bottom: 24px;
			// right: 5%;
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
		}

		.footer {
			position: fixed;
			width: 100%;
			background-color: white;
			bottom: 0;
			left: 0;
			padding: 20rpx 25rpx 20rpx 25rpx;
			box-sizing: border-box;

			.menu {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;

				image {
					width: 35rpx;
					height: 35rpx;
				}

				text {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 700;
					margin-top: 13rpx;
				}
			}

			.btn {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 26rpx;
				padding: 12rpx 0;
				background-color: #3e80fc;
				text-align: center;
				font-weight: 700;
				border-radius: 60rpx;
			}

			.admbtn {
				font-size: 30rpx;
				padding: 26rpx 0;
				flex: 1;
				color: rgb(255, 255, 255);
				border-radius: 60rpx;
				background-color: #bcbcbc;
				text-align: center;
				font-weight: 700;
			}

			.admbtn1 {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 26rpx;
				padding: 12rpx 0;
				border-radius: 60rpx;
				background-color: #bcbcbc;
				text-align: center;
				font-weight: 700;
			}
		}

		.footer1 {
			position: fixed;
			width: 100%;
			background-color: white;
			bottom: 120rpx;
			left: 0;
			padding: 20rpx 25rpx 20rpx 25rpx;
			box-sizing: border-box;

			.menu {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;

				image {
					width: 35rpx;
					height: 35rpx;
				}

				text {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 700;
					margin-top: 13rpx;
				}
			}

			.btn {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background-color: #3e80fc;
				text-align: center;
				font-weight: 700;
			}

			.admbtn {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background-color: #bcbcbc;
				text-align: center;
				font-weight: 700;
			}
		}

		.section-1 {
			height: 250rpx;

			.image {
				width: 200rpx;
				height: 250rpx;
				margin-right: 26rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 250rpx;
				}
			}

			.detail {
				flex: 1;
				width: 0;
				display: flex;
				height: 100%;
				flex-direction: column;
				justify-content: space-between;

				.detail-1 {
					font-size: 27rpx;
					font-weight: 500;
					color: #333333;
				}

				.title {
					font-size: 28rpx;
					margin-bottom: 10rpx;
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.tag {
					font-size: 22rpx;
					color: #2F75FA;
					background-color: #d5e3fe;
					border-radius: 8rpx;
					padding: 5rpx 10rpx;
					margin-right: 20rpx;
				}

				.tags {
					font-size: 22rpx;
					color: #2F75FA;
					background-color: #d5e3fe;
					border-radius: 8rpx;
					padding: 5rpx 10rpx;
					margin-right: 20rpx;
				}

				.detail-2 {
					font-size: 24rpx;
					font-weight: 500;
					color: #888888;
					margin-top: 12rpx;
				}

				.price {
					font-size: 20rpx;
					font-weight: 500;
					color: #ff0000;

					text {
						font-size: 32rpx;
						font-weight: 700;
					}
				}
			}
		}

		.section-2 {
			margin-top: 30rpx;
			font-size: 24rpx;

			.top-menu-list {
				display: flex;
				flex-wrap: wrap;

				.top-menu-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 20%;
					// margin-top: 10rpx;
					padding: 0px 30rpx;
					box-sizing: border-box;
					font-size: 25rpx;

					.add_na {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 20%;
						// margin-top: 30rpx;
						padding: 0px 30rpx;
						box-sizing: border-box;
						font-size: 25rpx;

						.menu-image {
							width: 100rpx;
							height: 100rpx;
							// border-radius: 37rpx;
							// background: rgb(250, 237, 234);
							// background: linear-gradient(45deg,
							// 		rgba(250, 237, 234, 1) 0%,
							// 		rgba(246, 227, 216, 1) 77%);
							background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/60cb40ff572199778113a809978ef6aa0f09db36.png') 100% no-repeat;
							background-size: 100% 100%;
							// position: absolute;
							// top: 0;
							// right: 0;
							// z-index: 999;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.menu-image-no-checked {
							width: 100rpx;
							height: 100rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
							}
						}

						.no-checked-text {
							white-space: nowrap;
						}

						.checked-text {
							margin-top: 20rpx;
							white-space: nowrap;
							font-weight: bold;
						}
					}
				}
			}

			.sub-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.tag-list {
				display: flex;
				flex-wrap: wrap;

				/deep/.u-tag {
					margin-left: 30rpx;
					margin-bottom: 30rpx;
				}

				.atinput {
					font-size: 26rpx;
					width: 600rpx;
					margin-left: 20rpx;
					margin: 5px;
				}

				// .tag{
				// 	background: #EFEFEF;
				// 	border-radius: 3px;
				// 	font-size: 24rpx;
				// 	font-weight: 500;
				// 	color: #FFFFFF;
				// 	padding: 7rpx 20rpx;
				// 	margin-right: 20rpx;
				// 	margin-bottom: 20rpx;
				// }

			}
		}



		.section-3 {
			font-size: 22rpx;
			font-weight: 500;
			color: #333333;
		}
	}
</style>